<template>
  <aside class="asideMenus">
    <div class="menuCtrl">
      <img
        src="@/assets/imgs/icons/sidbar.png"
        @click="isCollapse = !isCollapse"
        class="collBtn"
        alt=""
      />
    </div>
    <el-menu
      active-text-color="#E6A23C"
      background-color="#4A4F5B"
      class="fAside-menu"
      :style="{ width: !isCollapse ? '240px' : '64px' }"
      :default-active="defaultActive"
      text-color="#fff"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
    >
      <template v-for="aItem in menuList">
        <el-submenu
          v-if="aItem.children && aItem.children.length"
          :key="aItem.id"
          :index="aItem.path"
        >
          <template slot="title">
            <!-- <img :src="require(`../../assets/imgs/icons/${aItem.icon}.png`)" style="margin-right:10px"/> -->
            <span>{{ aItem.name }}</span>
          </template>
          <el-menu-item
            v-for="bItem in aItem.children"
            @click="gotoPage(bItem)"
            :key="bItem.id"
            :index="bItem.path"
          >
            <span>{{ bItem.name }}</span>
          </el-menu-item>
        </el-submenu>

        <el-menu-item v-else @click="gotoPage(aItem)" :index="aItem.path">
          <!-- <i :class="aItem.icon" style="color:#fff;"></i> -->
          <!-- <img :src="require(`@/assets/imgs/icons/${aItem.icon}.png`)" style="margin-right:10px"/> -->
          <span>{{ aItem.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </aside>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
      iconFlg: "Expand",
      menuName: "首页",
      defaultActive: "/industry",
      menuList: [
        // {
        //     icon: 'home',
        //     id: '100',
        //     name: '首页',
        //     path: '/index',
        //     active: false,
        // },
        {
          // icon: 'home',
          id: "100",
          name: "信息发布",
          // path: '/index',
          active: false,
          children: [
            {
              // icon: 'home',
              id: "101",
              name: "产业生态",
              path: "/industry",
              active: false,
            },
            {
              id: "102",
              name: "产品介绍",
              path: "/product",
              active: false,
            },
            {
              id: "103",
              name: "知识中心",
              path: "/article",
              active: false,
            },
            {
              id: "104",
              name: "公告中心",
              path: "/notice",
              active: false,
            },
          ],
        },
        {
          id: "200",
          name: "审核管理",
          // path: '/index',
          active: false,
          children: [
            {
              id: "201",
              name: "需求审核",
              path: "/demand",
              active: false,
            },
          ],
        },
      ],
    };
  },
  mounted() {
    //赋值 this.defaultActive当前路由
    this.defaultActive = this.$route.path;
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    gotoPage(menuObj) {
      if (menuObj.path) {
        this.menuName = menuObj.name;
        this.$router.push(menuObj.path);
      }
    },
  },
  watch: {
    $route(to, from) {
      this.defaultActive = to.path;
    },
  },
};
</script>
<style lang="scss" scoped>
.asideMenus {
  .menuCtrl {
    position: absolute;
    height: 50px;

    .collBtn {
      position: absolute;
      top: 16px;
      left: 26px;
      width: 20px;
      height: 20px;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
    }
  }
  .fAside-menu {
    margin-top: 50px;
    border-right: 1px solid #545c64;
  }
  .el-menu-item.is-active {
    color: #fff !important;
    border-left: 4px solid #409eff;
    background-color: #2f82ff28 !important;
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    color: #fff !important;
    border-left: 4px solid #409eff;
    background-color: #2f82ff28 !important;
  }
}
</style>
